<template>
  <div class="page-container">
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="1.选择仓库"></el-step>
      <el-step title="2.选择商品"></el-step>
      <el-step title="3.设置商品策略"></el-step>
      <el-step title="4.进目录成功"></el-step>
    </el-steps>

    <div v-show="active == 1">
      <el-row style="margin-top: 5px;">
        <el-col align="center" :span="4">
          <el-button size="mini" type="primary" @click.native.prevent="batchAddWarehouse">添加所有仓库</el-button>
          <el-button size="mini" type="primary" @click.native.prevent="addWarehouseDialog = true">添加仓库</el-button>
          <el-button size="mini" type="primary" @click.native.prevent="batchDeleteWarehouse"
                     :disabled="addWarehouseSelection.length < 1">批量移除
          </el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 5px;">
        <el-table
          :data="pageResultWarehouse" :size="size" align="align" style="width: 100%" :min-height="350" :stripe="true"
          @selection-change="selectionChangeWarehouse"
          ref="multipleTableWarehouse"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column prop="name" label="仓库名称" sortable></el-table-column>
          <el-table-column prop="code" label="仓库编码" sortable></el-table-column>
<!--          <el-table-column prop="merchantName" label="商家名称" sortable></el-table-column>-->
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <kt-button label="移除" :size="size" type="success"
                         @click.native.prevent="deleteWarehouse(scope.$index, pageResultWarehouse)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <div v-show="active == 2">
      <el-row style="margin-top: 5px;">
        <el-col align="center" :span="4">
          <el-button size="mini" type="primary" @click.native.prevent="batchAddProduct">添加所有商品</el-button>
          <el-button size="mini" type="primary" @click.native.prevent="addProductDialog = true">添加商品</el-button>
          <el-button size="mini" type="primary" @click.native.prevent="batchDeleteProduct"
                     :disabled="addProductSelection.length < 1">批量移除
          </el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 5px;">
        <el-table
          :data="pageResultProduct" :size="size" align="align" style="width: 100%" :min-height="350" :stripe="true"
          @selection-change="selectionChangeProduct"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column prop="chineseName" label="商品名称" sortable></el-table-column>
          <el-table-column prop="code" label="商品编码" sortable></el-table-column>
          <el-table-column prop="barCode" label="商品条码" sortable></el-table-column>
          <el-table-column prop="artNo" label="货号" sortable></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <kt-button label="移除" :size="size" type="success"
                         @click.native.prevent="deleteProduct(scope.$index, pageResultProduct)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <div v-show="active == 3">
      <el-row style="margin-top: 5px;">
        <el-col align="left">
          <el-button size="mini" type="primary" @click="setFlowPathDialog = true"
                     :disabled="FlowPathSelection.length < 1">设置流转途径
          </el-button>
        </el-col>
      </el-row>
      <el-row style="margin-top: 5px;">
        <el-table
          :data="setFlowPathData" :size="size" align="align" style="width: 100%" :min-height="350" :stripe="true"
          @selection-change="selectionChangeFlowPath"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column prop="chineseName" label="商品名称" sortable></el-table-column>
          <el-table-column prop="code" label="商品编码" sortable></el-table-column>
          <el-table-column prop="barCode" label="商品条码" sortable></el-table-column>
          <el-table-column prop="artNo" label="货号" sortable></el-table-column>
          <el-table-column prop="transportWay" label="流转途径" sortable></el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <kt-button label="编辑" :size="size" type="success" @click="handleSetFlowPath1(scope.$index, scope.row)"/>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <div v-show="active == 4">
      <el-row style="margin-top: 8vh;">
        <el-col align="center">
          <el-button type="primary" size="mini" @click="next" v-if="active == 4">完成</el-button>
        </el-col>
      </el-row>
    </div>

    <!--上一步、下一步按钮-->
    <el-button type="primary" size="mini" @click="upStep" v-show="active == 2 || active == 3">上一步</el-button>
    <el-button type="primary" size="mini" @click="next" v-show="active < 4">下一步</el-button>

    <!--添加仓库弹窗-->
    <el-dialog title="添加仓库" top="7vh" width="70%" :visible.sync="addWarehouseDialog" v-if="addWarehouseDialog"
               :close-on-click-modal="false">
      <el-form :model="warehouseFilters" label-position="right" :inline="true" :size="size" label-width="100px">
        <el-row>
          <el-form-item label="仓库名称：">
            <el-input v-model="warehouseFilters.name"></el-input>
          </el-form-item>
          <el-form-item label="仓库编码：">
            <el-input v-model="warehouseFilters.code"></el-input>
          </el-form-item>
          <!-- 查询  重置 -->
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                       @click="findWarehousePage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetWarehouseForm()"/>
          </el-form-item>
        </el-row>
      </el-form>
      <cy-table
        :height="350"
        :columns="addWarehouse1"
        :content="addWarehouse2"
        :totalSize="addWarehouse3"
        @selectionChange="selectionChangeWarehouse1"
        @findPage="findWarehousePage"
        :showOperation="false"
        ref="CyTable"></cy-table>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="addWarehouseDialog = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native.prevent="addWarehouseSubmit">{{$t('action.submit')}}
        </el-button>
      </div>
    </el-dialog>

    <!--添加商品弹窗-->
    <el-dialog title="添加商品" top="7vh" width="70vw" :visible.sync="addProductDialog" v-if="addProductDialog"
               :close-on-click-modal="false">
      <el-form label-position="right" :model="productFilters" :inline="true" :size="size" label-width="100px">
        <el-form-item label="商品名称：">
          <el-input v-model="productFilters.chineseName"></el-input>
        </el-form-item>
        <el-form-item label="商品编码：">
          <el-input v-model="productFilters.code"></el-input>
        </el-form-item>
        <el-form-item label="商品条码：">
          <el-input v-model="productFilters.barCode"></el-input>
        </el-form-item>
        <el-form-item label="货号：">
          <el-input v-model="productFilters.artNo"></el-input>
        </el-form-item>
        <!-- 查询  重置 -->
        <el-form-item>
          <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                     @click.native.prevent="findProductPage(null)"/>
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click.native.prevent="resetProductForm()"/>
        </el-form-item>
      </el-form>
      <cy-table
        :height="350"
        :columns="addProduct1"
        :content="addProduct2"
        :totalSize="addProduct3"
        @selectionChange="selectionChangeProduct1"
        @findPage="findProductPage"
        :showOperation="false"
        ref="CyTable"></cy-table>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native.prevent="addProductDialog = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native.prevent="addProductSubmit">{{$t('action.submit')}}
        </el-button>
      </div>
    </el-dialog>

    <!--设置流转途径-->
    <el-dialog title="设置流转途径" top="7vh" width="40%" :visible.sync="setFlowPathDialog" :close-on-click-modal="false">
      <el-form label-position="right" :inline="true" :size="size" label-width="100px">
        <el-form-item label="流转途径：" prop="transportWay">
          <el-select v-model="transportWay" clearable>
            <el-option label="配送" value="1"></el-option>
            <el-option label="直送" value="2"></el-option>
            <el-option label="直通" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click="setFlowPathDialog = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click="handleSetFlowPath">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

    <!--修改经营属性-->
    <el-dialog title="修改经营属性" top="7vh" width="70%" :visible.sync="setAttributesDialog" :close-on-click-modal="false">
      <el-form label-position="left" :model="setAttributesValue" :inline="true" :size="size" label-width="100px">
        <el-row>
          <el-form-item label="商品名称：">
            <el-input v-model="setAttributesValue.chineseName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="商品编码：">
            <el-input v-model="setAttributesValue.code" :disabled="true"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="商品条码：">
            <el-input v-model="setAttributesValue.barCode" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="货号：">
            <el-input v-model="setAttributesValue.artNo" :disabled="true"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="流转途径：">
            <el-select v-model="setAttributesValue.transportWay">
              <el-option label="配送" value="1"></el-option>
              <el-option label="直送" value="2"></el-option>
              <el-option label="直通" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="setAttributesDialog = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="handleSetAttributes">{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/ProductTable";
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      CyTable,
      KtButton,
    },
    
    data() {
      return {
        size: "small",
        active: 1,
        pageRequest: {pageNum: 1, pageSize: 10},
        // active = 1
        pageResultWarehouse: [],
        addWarehouseSelection: [],
        // active = 2
        pageResultProduct: [],
        addProductSelection: [],
        // active = 3
        setFlowPathData: [],
        // 添加仓库弹窗
        addWarehouseDialog: false,
        warehouseFilters: {
          name: '',
          code: '',
        },
        addWarehouse1: [
          {prop: "name", label: "仓库名称"},
          {prop: "code", label: "仓库编码"},
        ],
        addWarehouse2: [],
        addWarehouse3: 0,
        addWarehouseSelection1: [],
        // 添加商品弹窗
        addProductDialog: false,
        productFilters: {
          chineseName: '',
          code: '',
          barCode: '',
          artNo: '',
        },
        addProduct1: [
          {prop: "chineseName", label: "商品名称", minWidth: 120},
          {prop: "code", label: "商品编码", minWidth: 120},
          {prop: "barCode", label: "商品条码", minWidth: 120},
          {prop: "artNo", label: "货号", minWidth: 120}
        ],
        addProduct2: [],
        addProduct3: 0,
        addProductSelection1: [],
        // 设置流转途径弹窗
        setFlowPathDialog: false,
        FlowPathSelection: [],
        transportWay: null,
        // 修改经营属性弹窗
        setAttributesDialog: false,
        setAttributesValue: {
          id: '',
          chineseName: '',
          code: '',
          barCode: '',
          artNo: '',
          transportWay: ''
        },
      };
    },
    
    methods: {
// active = 1
      // 批量添加仓库
      batchAddWarehouse() {
        let this_ = this;
        this.utils.request.getMStoreList(null, function (res) {
          if (res.code == "0000") {
            this_.pageResultWarehouse = res.data;
          }
        })
      },
      // 批量移除仓库
      batchDeleteWarehouse() {
        //拿到选中的数据
        let val = this.addWarehouseSelection
        //如果选中数据存在
        if (val) {
          //将选中数据遍历
          val.forEach((val, index) => {
            //遍历源数据
            this.pageResultWarehouse.forEach((v, i) => {
              //如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
              if (val.id === v.id) {
                this.pageResultWarehouse.splice(i, 1)
              }
            })
          })
        }
        //清除选中状态
        this.$refs.multipleTableWarehouse.clearSelection()
      },
      // 移除仓库
      deleteWarehouse(index, rows) {
        rows.splice(index, 1);
      },
      // 仓库获取分页数据
      findWarehousePage(params) {
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.warehouseFilters == undefined || this_.warehouseFilters == null) {
          this_.warehouseFilters = {};
        }
        this_.warehouseFilters.pageNum = params.pageNum;
        this_.warehouseFilters.pageSize = params.pageSize;
        this.utils.request.findMStorePage(this_.warehouseFilters, function (res) {
          this_.addWarehouse2 = res.data.rows;
          this_.addWarehouse3 = Number(res.data.total);
        });
      },
      // 仓库列表所选的
      selectionChangeWarehouse(val) {
        this.addWarehouseSelection = val;
      },
      // 仓库弹窗所选的
      selectionChangeWarehouse1(selections) {
        this.addWarehouseSelection1 = selections.selections;
      },
      // 添加仓库提交
      addWarehouseSubmit() {
        let this_ = this;
        let selectData = this_.addWarehouseSelection1;
        if (this_.pageResultWarehouse.length < 1) {
          this_.pageResultWarehouse = selectData;
        } else {
          let json = this_.pageResultWarehouse.concat(selectData); //两个数组对象合并
          let newJson = [];
          json.forEach((val, i) => {
            let flag = true;  //建立标记，判断数据是否重复，true为不重复
            newJson.forEach((value, index) => {
              if (value.id === val.id) { //让数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
                flag = false;
              }
            })
            if (flag) {
              newJson.push(val)
            }
          })
          this_.pageResultWarehouse = newJson;
        }
        this_.addWarehouseDialog = false;
      },
      // 重置仓库查询
      resetWarehouseForm() {
        this.warehouseFilters = {};
        let params = {pageSize : 10, pageNum: 1}
        this.findWarehousePage(params);
      },

// active = 2  根据商品编码筛选重复
      // 批量添加商品
      batchAddProduct() {
        let this_ = this;
        this.utils.request.queryProductCatalog(null, function (res) {
          if (res.code == "0000") {
            this_.pageResultProduct = res.data;
          }
        })
      },
      // 批量移除商品
      batchDeleteProduct() {
        //拿到选中的数据
        let val = this.addProductSelection
        //如果选中数据存在
        if (val) {
          //将选中数据遍历
          val.forEach((val, index) => {
            //遍历源数据
            this.pageResultProduct.forEach((v, i) => {
              //如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
              if (val.code === v.code) {
                this.pageResultProduct.splice(i, 1)
              }
            })
          })
        }
        //清除选中状态
        this.$refs.multipleTableWarehouse.clearSelection()
      },
      // 移除商品
      deleteProduct(index, rows) {
        rows.splice(index, 1);
      },
      // 商品获取分页数据
      findProductPage(params) {
        let this_ = this;
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.productFilters == undefined || this_.productFilters == null) {
          this_.productFilters = {}
        }
        this_.productFilters.start = params.pageNum;
        this_.productFilters.limit = params.pageSize;
        this.utils.request.queryPageProductManagement(this_.productFilters, function (res) {
          this_.addProduct2 = res.data.rows;
          this_.addProduct3 = Number(res.data.total);
        });
      },
      // 商品列表所选的
      selectionChangeProduct(val) {
        this.addProductSelection = val;
      },
      // 商品弹窗所选的
      selectionChangeProduct1(selections) {
        this.addProductSelection1 = selections.selections;
      },
      // 添加商品提交
      addProductSubmit() {
        let this_ = this;
        let selectData = this_.addProductSelection1;
        if (this_.pageResultProduct.length < 1) {
          this_.pageResultProduct = selectData;
        } else {
          let json = this_.pageResultProduct.concat(selectData); //两个数组对象合并
          let newJson = [];
          json.forEach((val, i) => {
            let flag = true;  //建立标记，判断数据是否重复，true为不重复
            newJson.forEach((value, index) => {
              if (value.code === val.code) { //让数组对象的内容与新数组的内容作比较，相同的话，改变标记为false
                flag = false;
              }
            })
            if (flag) {
              newJson.push(val)
            }
          })
          this_.pageResultProduct = newJson;
        }
        this_.addProductDialog = false;
      },
      // 重置商品查询
      resetProductForm() {
        this.productFilters = {};
        this.findProductPage(1);
      },

// active = 3
      // 流转途径(1.配送 2.直送 3.直通)
      formatTransportWay(prop) {
        if (prop == 1) {
          return "配送";
        } else if (prop == 2) {
          return "直送";
        } else if (prop == 3) {
          return "直通";
        }
      },
      // 流转途径所选
      selectionChangeFlowPath(val) {
        this.FlowPathSelection = val;
      },
      // 流转途径批量编辑
      handleSetFlowPath() {
        let this_ = this;
        let transportWay = this_.formatTransportWay(this_.transportWay);
        $.each(this_.FlowPathSelection, function (index, val) {
          $.each(this_.setFlowPathData, function (i, v) {
            if (val.code === v.code) {
              this_.$set(this_.setFlowPathData[i], 'transportWay', transportWay);
            }
          });
        })
        this_.setFlowPathDialog = false;
      },
      // 修改经营属性显示
      handleSetFlowPath1(index, data) {
        this.setAttributesValue = Object.assign({},data);
        this.setAttributesDialog = true;
      },
      // 修改经营属性提交
      handleSetAttributes() {
        let this_ = this;
        let transportWay = this_.formatTransportWay(this_.setAttributesValue.transportWay);
        $.each(this_.setFlowPathData, function (i, v) {
          if (this_.setAttributesValue.id === v.id) {
            this_.$set(this_.setFlowPathData[i], 'transportWay', transportWay);
          }
        });
        this_.setAttributesDialog = false;
      },

// 上一步,下一步
      // 下一步
      next() {
        // 下一步判断内容
        if (this.active == 1 && this.pageResultWarehouse.length < 1) {
          this.$message({
            message: "请先添加仓库！", type: "error"
          });
          return;
        } else if (this.active == 2 && this.pageResultProduct.length < 1) {
          this.$message({
            message: "请先添加商品！", type: "error"
          });
          return;
        } else if (this.active == 3) {
          // 判断集合中是否存在transportWay
          for (let i = 0, len = this.setFlowPathData.length; i < len; i++) {
              if (this.setFlowPathData[i].transportWay == '' || this.setFlowPathData[i].transportWay == null) {
                this.$message({message: "请先设置流转途径！", type: "error"});
                return;
              }
          }
        }

        if (this.active++ > 3) {
          this.active = 1;
        }

        if (this.active == 3) {
          this.setFlowPathData = this.pageResultProduct;
        }

        // 把数据发送给后台
        if (this.active == 4) {
          let this_ = this;
          let params = {};
          params.warehouseIdList = [];
          this_.pageResultWarehouse.forEach((val, i) => {
            params.warehouseIdList.push(val.id);
          });
          this_.setFlowPathData.forEach(val => {
            if (val.transportWay == '配送') {
              val.transportWay = 1;
            } else if (val.transportWay == '直送') {
              val.transportWay = 2;
            } else if (val.transportWay == '直通') {
              val.transportWay = 3;
            }
          });
          params.warehouseProductRequestList = this_.setFlowPathData;
          this_.utils.request.saveWarehouseProductRelation(params, function (res) {
            if (res.code == "0000") {
              this_.pageResultWarehouse = [];
              this_.pageResultProduct = [];
              this_.setFlowPathData = [];
              this_.$message({message: "操作成功", type: "success"});
            } else {
              this_.$message({message: "操作失败", type: "error"});
            }
          });
        }
      },

      // 上一步
      upStep() {
        if (this.active === 2) {
          this.active = 1;
        } else if (this.active === 3) {
          this.active = 2;
        }
      },
    }
  }
</script>

<style scoped>
</style>
